/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-15 09:23:54
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorBlack,
} from '@/styles';
import {
  backWhite,
  idCardBack, idCardFront } from '@/images';
import { Button } from '@/common';
import CameraCard from '../../components/camera-card';
import Upload from '../../components/upload';

import ImageViewer from '../../../../components/XmImageViewer';

export default class CertWrap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false, // 是否显示照片预览
      imageSources: [], // 照片预览数据
    };
  }

  componentDidMount() {}

  onCatchImage = (uri) => {
    this.setState({ modalVisible: true, imageSources: [{ url: uri }] });
  }

  render() {
    const { applicationInsuranceDetail } = this.props;
    const { modalVisible, imageSources } = this.state;
    return (
      <>
        <View style={styles.wrap}>
          <View style={styles.drivingWrap}>
            <Text style={styles.drivingTitle}>车辆行驶证</Text>
            <View style={styles.drivingLicense}>
              <CameraCard
                title='行驶证正本'
                defaultBg={require('../../../../images/wl/driving_license_bg1.png')}
                imgUrl={applicationInsuranceDetail.drivingFrontUrl}
                onCatchImage={() => { this.onCatchImage(applicationInsuranceDetail.drivingFrontUrl); }}
              />
              <CameraCard
                title='行驶证副本'
                defaultBg={require('../../../../images/wl/driving_license_bg3.png')}
                imgUrl={applicationInsuranceDetail.drivingAnnexUrl}
                onCatchImage={() => { this.onCatchImage(applicationInsuranceDetail.drivingAnnexUrl); }}
              />
            </View>
          </View>
        </View>
        { applicationInsuranceDetail.carOwnerType && applicationInsuranceDetail.carOwnerType.code == 1 && (
          <View style={styles.wrap}>
            <View style={styles.drivingWrap}>
              <Text style={styles.drivingTitle}>身份证</Text>
              <View style={styles.drivingLicense}>
                <CameraCard
                  title='身份证正本'
                  defaultBg={idCardFront}
                  imgUrl={applicationInsuranceDetail.idCardFrontUrl}
                  onCatchImage={() => { this.onCatchImage(applicationInsuranceDetail.idCardFrontUrl); }}
                />
                <CameraCard
                  title='身份证副本'
                  defaultBg={idCardBack}
                  imgUrl={applicationInsuranceDetail.idCardAnnexUrl}
                  onCatchImage={() => { this.onCatchImage(applicationInsuranceDetail.idCardAnnexUrl); }}
                />
              </View>
            </View>
          </View>
        )}

        {applicationInsuranceDetail.carOwnerType && applicationInsuranceDetail.carOwnerType.code == 2 && (
          <View style={styles.wrap}>
            <View style={styles.drivingWrap}>
              <Text style={styles.drivingTitle}>上传营业执照照片</Text>
              <View style={styles.drivingLicense}>
                <Upload
                  limit={1}
                  action='upload?dirName=insurance'
                  fileList={
                    applicationInsuranceDetail.licenseUrl
                      ? [{ url: applicationInsuranceDetail.licenseUrl }]
                      : []
                  }
                  onChange={(fileList) => {}}
                  onTouchImage={(item) => { this.onCatchImage(applicationInsuranceDetail.licenseUrl); }}
                  type='view'
                />
              </View>
            </View>
          </View>
        )}
        {/* 图片查看 */}
        <ImageViewer
          leftBackIcon={backWhite}
          showViewModal={() => this.setState({ modalVisible: false })}
          previewModal={modalVisible}
          images={imageSources}
        />
      </>
    );
  }
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(40),
    marginTop: px2dp(24),
  },
  drivingLicense: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  drivingTitle: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    marginBottom: px2dp(40),
  },
});
